<template>
	<view :class="[primarySize()]">
		<view class="container">
			<view class="p30">
				<view class="main p30">
					<view class="fs44 col10 fwb">
						添加地址
					</view>
					<view @click="workMap">
						<view class="add mt40 flex-box">
							<view class="fs30 col5  mb40  flex-grow-1">
								工作地点
							</view>
							<image class="arrow" src="@/static/public/arrow-r.png" mode="aspectFill" />
						</view>
						<view class="col1 fs30  border" v-if="workAddress">
							<view class="col1 fs30 mb20">
								{{workAddress?workAddress.name:''}}
							</view>
							<view class="mtb20 col5 fs24">
								{{workAddress?workAddress.address:''}}
							</view>
						</view>
						<view class="col1 fs30  border" v-else>
							<view class="col1 fs30 mb20">
								请选择
							</view>
				
						</view>
					</view>
					<view class="pt40 pb30 col5">
						楼层/单元楼/门牌号
					</view>
						<input class=" flex-grow-1" type="text" value="" @input="bindInputHouseNumber" placeholder="请输入" />
		
				</view>
				<view class="ptb60">
					<button @click="bindSave" hover-class="none" class="btn1">保存
					</button>
				</view>
			</view>
			
		</view>
		<u-popup :show="!position" mode="center" :safeAreaInsetBottom="false" @close="togglePop" bgColor="transparent">
			<view class="tc fs30 col10 pop_title border">
				定位需要您的地理位置
			</view>
			<view class="flex-box btn_pop fs30">
				<view class="w50 tc border_r col5" @click="bindClose">
					取消
				</view>
				<view class="w50 tc colo1" @click="bindOpen">
					去开启
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const app = getApp();
	var validate = require("../../xilu/validate.js");
	export default {
		data() {
			return {
				
				position: true,
				location: {},
				address: '',
				workAddress: null,
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad() {
			
		},
		methods: {
			workMap() {
				let that = this;
				that.$core.getLatLng({success(res){
					that.$core.getChooseLocation({lat: res.latitude,lng: res.longitude}).then(ret=>{
						that.workAddress = ret
					})
				},fail(){
					that.position = false
				}})
			},
			bindInputHouseNumber: function (event) {
			    this.houseNumber = event.detail.value
			},
			bindSave: function () {
			    let workAddress = this.workAddress;
			    if(!workAddress){
					uni.showToast({title: '工作地址错误',icon:'none'})
					return false;
				}
				let data = {
			       lat: workAddress.lat,
			       lng: workAddress.lng,
			       address_name: workAddress.name,
			       address: workAddress.address,
			       house_number: this.houseNumber
			    }
				var rule = [
					{name: 'address',rules: ['require'],errorMsg: {require: '请填写详细地址'}},
					{name: 'house_number',rules: ['require'],errorMsg: {require: '请填写门牌号'}}
				];
				if (!validate.check(data, rule)) {
					uni.showToast({title: validate.getError()[0],icon: 'none'});
					return;
				}
				let that = this;
				this.$core.post({url: '/xilujob.company_address/add_address',data:data,success(ret, data) {
					that.getOpenerEventChannel().emit('locationAdd', ret.data);
					uni.navigateBack();
				}});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header_img {
		width: 120rpx;
		height: 120rpx;
		display: block;
		border-radius: 50%;
		overflow: hidden
	}

	.header_img image {
		width: 100%;
		height: 100%;
		display: block
	}

	.bd1e1 {
		border-bottom: 1rpx solid #E1E1E1;
	}

	.info_name {
		width: 120rpx;
		text-align-last: justify;
		white-space: nowrap;
		align-items: flex-start;
		align-self: flex-start;
		padding: 40rpx 0
	}

	.info_item input {
		height: 100rpx;
		line-height: 100rpx;
		text-align: right
	}

	.info_item picker {
		height: 100rpx;
		line-height: 100rpx;
		text-align: right;
		padding-right: 15rpx
	}

	.info_item textarea {
		height: 120rpx;
		line-height: 40rpx;
		text-align: right;
		padding: 40rpx 0;
		padding-left: 30rpx;
	}

	.ml0 {
		margin-left: 0
	}

	.info_item:nth-last-child(1) {
		border-bottom: 0;
	}

	.pl65 {
		padding-left: 65rpx;
	}

	.mt65 {
		margin-top: 65rpx;
	}

	.arrow {
		width: 13rpx;
		height: 22rpx;
	}

	/* .add{margin-top: 107rpx;} */
	.border {
		border-bottom: 1rpx solid #EEEEEE;
	}

	.main {
		background-color: #fff;
	}

	/* .pop{width: 560rpx;border-radius: 10rpx;} */
	.pop2 {
		width: 560rpx;
		border-radius: 10rpx !important;
	}

	.pop_title {
		padding: 64rpx 0;
	}

	.btn_pop {
		line-height: 90rpx;
	}

	.border_r {
		border-right: 1rpx solid #EEEEEE;
	}

	.popup-wrap {
		margin: 0;
	}

	.colo1 {
		color: #FF7100;
	}

	.border {
		border-bottom: 1rpx solid #EEEEEE;
	}
	.ptb60{padding-top: 60rpx;padding-bottom: 60rpx;}
</style>